<template>
	<view class="main_bgc">
		<view class="title">防诈骗指南</view>
		<view class="title-xiao">
			<img src='../../static/xin/Slice 6@2x.png' />
			保障财产安全
			<img src='../../static/xin/Slice 7@2x.png' />
		</view>

		<!--  -->
		<view class="details">
			<view class="details_title">以下情形是常见的贷款诈骗类案例</view>
			<view class="details_del">我司已将收集的相关证据提交公安备案，各位在贷款的时候也需提高防范意识，保护好个人的钱袋子。</view>
		</view>

		<!--  -->
		<view class="prompt">
			<view class="prompt_item" v-for="(item,index) in detailList">
				<view class="prompt_item_title"><img :src="item.title" /></view>
				<view class="prompt_item_text">{{item.text}}</view>
			</view>
		</view>

		<!-- 案例 -->
		<view class="case prompt">
			<view class="case_title">以下这些案例你们都知道吗?</view>
			<view class="case_item" v-for="(item,index) in caseList">
				<view class="case_item_title">{{item.title}}</view>
				<view class="case_item_text" v-html="item.text" :class="index == 2?'juzhong':''"></view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: [{
					title: '../../static/xin/Slice 24@2x.png',
					text: '诱导用户下载App后，任意输入手机号无需验证，即可登录;'
				}, {
					title: '../../static/xin/Slice 25@2x.png',
					text: '用户登录后输入姓名、身份证、银行卡号等个人信息申请产品，所有信息即使有误也可以成功提交申请。'
				}, {
					title: '../../static/xin/Slice 26@2x.png',
					text: '提交申请后约1个小时，申请状态将会显示“已通过”，用户点击“提现”按钮签字后，将会显示“银行卡信息不符，资金冻结”。实际上是该App擅自将合同内的卡号修改，蒙骗客户是由于个人误填卡号而造成账号冻结。'
				}, {
					title: '../../static/xin/Slice 27@2x.png',
					text: '联系客服后，客服称是由于客户疏忽造成的资金冻结，贷款实际已下发，建议客户缴纳“解冻费”解冻账户，若不解冻账户，客户因签署借贷合同经公证备案也必须按期还款。'
				}, ],
				caseList: [{
						title: '01、收到额度到账不明短信',
						text: '发送短信诱导用户下载，冒充品牌APP产品，请勿点击短信内的不明链接。'
					},
					{
						title: '02、收到境外地区来电',
						text: '请勿接听来自“中国香港”、“缅甸”、“美国”、“俄罗斯”等地区的未知来电。'
					},
					{
						title: '03、警惕不法分子要求添加客服，通过以下方式(包括但不限于)为由进行诈骗',
						text: '“银行卡信息有误解冻费”、<br/>“网购退货赔偿”<br/>“提高额度充值会员费”、<br/>“调整利率”<br/>“注销贷款账户”<br/>“担保费”、<br/>“手续费”、<br/>“工本费” <br/>等进行转账汇款或验证流水等方式实施诈骗。'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.main_bgc {
		width: 752rpx;
		height: 2420rpx;
		background: linear-gradient(180deg, #D9E8FF 0%, #FFFFFF 58%, #FFFFFF 99%);

		.title {
			height: 62rpx;
			font-weight: 400;
			font-size: 52rpx;
			color: #264DD8;
			line-height: 61rpx;
			text-align: center;
			margin: 0 auto;
			padding-top: 54rpx;
		}

		.title-xiao {
			height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #5D77FF;
			line-height: 33rpx;
			text-align: center;
			margin: 0 auto;
			padding-top: 20rpx;


			img {
				vertical-align: middle;
				margin-left: 68rpx;
				height: 40rpx;
				margin-right: 68rpx;
			}
		}

		.details {
			width: 730rpx;
			height: 350rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			/* border: 2rpx solid; */
			/* margin: 0 auto;
			margin-top: 42rpx; */
			background-image: url('../../static/Slice 8@2x.png');
			background-size: contain;
			background-repeat: no-repeat;
			margin-bottom: 25rpx;
			margin-left: 15rpx;
			/* margin-left: 40rpx; */
			/* margin-bottom: 68rpx; */

			.details_title {
				width: 480rpx;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				text-align: center;
				margin: 0 auto;
				padding-top: 95rpx;
				padding-bottom: 30rpx;
			}

			.details_del {
				width: 578rpx;
				height: 68rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				margin: 0 auto;
				/* letter-spacing: 1rpx; */
			}
		}

		.prompt {
			width: 605rpx;
			height: 732rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(146, 184, 241, 0.8);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto;
			padding: 20rpx 40rpx;

			.prompt_item {
				margin-top: 20rpx;

				.prompt_item_title {
					width: 88rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #264DD8;
					line-height: 38rpx;
					text-align: center;
					margin-bottom: 12rpx;
					img{
						height: 100%;
					}
				}

				.prompt_item_text {
					width: 590rpx;
					/* height: 68rpx; */
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;

				}
			}
		}


		.case {
			width: 590rpx;
			height: 1000rpx;
			margin-top: 28rpx;

			.case_title {
				width: 402rpx;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				margin: 0 auto;
				margin-top: 50rpx;
				/* box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(146,184,241,0.8); */

			}

			.case_item {
				margin-top: 48rpx;

				.case_item_title {
					font-weight: bold;
					font-size: 28rpx;
					color: #264DD8;
					margin-bottom: 12rpx;
				}

				.juzhong {
					text-align: center;
				}
			}
		}


	}
</style>